<template>
	<view class="page-container">
		<!-- 顶部场馆信息 -->
		<!-- <view class="venue-header">
			<view class="venue-info-container">
				<image class="venue-image"
					src="https://ai-public.mastergo.com/ai/img_res/780968c3ed84303e411c5f7dae942ef1.jpg"
					mode="aspectFill"></image>
				<view class="venue-info">
					<text class="venue-name">阳光体育中心</text>
					<text class="venue-address">北京市朝阳区建国路88号</text>
				</view>
			</view>
			<view class="date-picker">
				<uni-icons class="date-icon" type="calendar" size="24" color="#666666" @click="onDateIconClick" />
			</view>
		</view> -->
		<view class="con-1">
			<nav-bar title="客流统计" color="white" bg="rgba(0,0,0,0)"></nav-bar>
			<view class="bg">
				<view class="address">
					<view class="flex-space-between">
						<view class="flex-align">
							<van-image v-if="itemChooselist.venue_thumb != ''" width="74rpx" height="74rpx" radius="2"
								style="margin-right: 10rpx;" :src="itemChooselist.venue_thumb" />
							<van-image v-else width="74rpx" height="74rpx" radius="10rpx" fit="cover" style="margin-right: 10rpx;" src="https://img.yzcdn.cn/vant/cat.jpeg" />
							<view>
								<view class="address-name">{{itemChooselist.venue_name}}</view>
								<view class="address-desc">地址:{{itemChooselist.address}}</view>
							</view>
						</view>
						<view class="exchange flex-center flex-column " @click="show_no">
							<van-icon name="exchange" size="16" />
							切换
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="" style="padding-top: 305rpx;">
			<view style="width: 100%; height: 60rpx;background-color: #ffffff;">
				<view style="float: left;">
					<image style="width: 32rpx;height: 32rpx;margin-top: 15rpx;margin-left: 30rpx;"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/dbe7a7371520f7585b4a83558336c24acbace2cc.png"
						mode=""></image>
				</view>
				<view style="float: left;line-height: 60rpx;font-size: 28rpx;color: #aaaaaa;margin-left: 20rpx;">
					数据仅供参考，以后台财务数据为准
				</view>
			</view>
			<!-- 核心数据看板 -->
			<view class="data-board" style="padding: 20rpx 30rpx 0 30rpx;">
				<view class="data-card">
					<text class="card-title">今日流量</text>
					<text class="card-value">{{lineData.todayNum}}</text>
					<!-- <text class="card-unit">人次</text> -->
				</view>
				<view class="data-card">
					<text class="card-title">总计流量</text>
					<text class="card-value">{{lineData.totalNum}}</text>
					<!-- <text class="card-unit">人次</text> -->
				</view>
				<view class="data-card">
					<view class="card-title" style="font-size: 24rpx;">峰值 <text
							style="color: red;">{{lineData.max.date}}</text> </view>
					<view class="card-value" style="color: #4080FF;">{{lineData.max.sum_num}}</view>
					<!-- <text class="card-desc"></text> -->
				</view>
			</view>
			<!-- 标题和时间 -->
			<view
				style="width: 750rpx;height: auto;background: #FFFFFF;border-radius: 20rpx;padding: 20rpx 30rpx 0 30rpx;margin-top: 20rpx;">
				<view class="data-header"
					style="padding: 30rpx;width: 690rpx;height: 109rpx;background: #EFDBFF;border-radius: 20rpx 20rpx 0 0;">
					<text class="data-title">今日实时数据</text>
					<view class="time-refresh">
						<text class="data-time">更新于 {{formattedTime}}</text>
						<uni-icons class="refresh-icon" type="refresh" size="16" color="#666666" @click="onRefresh" />
					</view>
				</view>
				<!-- 当前客流卡片 -->
				<view class="current-flow-card"
					style="padding: 30rpx;display: flex; flex-direction: row;width: 690rpx;height: 275rpx;background: #C77DFF;border-radius: 0rpx 0rpx 20rpx 20rpx;  align-items: center;">
					<!-- 结构部分 -->
					<view class="progress-container">
						<cCircle :size="80" :percent="lineData.per" animation circleColor="#EFDBFF" :circleWidth="10"
							:direction="180" defaultColor="#ffffff">
							<view slot="content" class=""
								style=" height: 100%;width: 100%;border-radius: 50%;font-size: 24rpx;color: #ffffff;display: flex; flex-direction: column; justify-content: center;align-items: center;">
								<view>
									<text style="font-size: 28rpx;">{{lineData.per}}</text>%
								</view>
								<view>
									繁忙度
								</view>
							</view>
						</cCircle>
					</view>
					<view class="flow-status"
						style="width: 340rpx;height: 192rpx;background: rgba(255,255,255,0.6);border-radius: 20rpx;margin-left: 40rpx;">
						<view class="status-item">
							<text class="status-label">场内</text>
							<text class="status-value status-inside">{{lineData.in_num}}</text>
						</view>
						<view class="status-item">
							<text class="status-label">未进场</text>
							<text class="status-value status-waiting">{{lineData.no_in}}</text>
						</view>
						<view class="status-item">
							<text class="status-label">离场</text>
							<text class="status-value status-left">{{lineData.out_num}}</text>
						</view>
						<view class="status-item">
							<text class="status-label">反核销</text>
							<text class="status-value status-left">{{lineData.reverse}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 项目分类分析 -->
			<view class="chart-container">
				<view class="chart-header">
					<text class="chart-title">项目分类分析</text>
					<view class="filter-icon">
						<!-- <uni-icons type="list" size="20" color="#666666" @click="onCategoryFilter" /> -->
						<text class="trend-date-range">{{lineData.date.start_date}}-{{lineData.date.end_date}}</text>
					</view>
				</view>
				<view class="chart-header1">
					<text class="chart-title"></text>
					<text class="last-month-data">{{lineData.show_total}}人次</text>
				</view>
				<view class="source-title">
					<view class=" week-list flex-wrap"
						style="display: flex;align-items: center;justify-content: flex-start">
						<view class="week-item" :class="{'active':index === selectId}" v-for="(item,index) in weekList"
							:key="index" @click="timesSelect(item,index)">
							{{item.label}}
						</view>
					</view>
				</view>
				<view class="chart-content" v-show="showlist">
					<qiun-data-charts type="ring" :opts="pieOpts" :chartData="pieChartData" />
					<!-- <qiun-data-charts type="ring" :opts="ringopts" :chartData="pieChartData" /> -->
					<!-- <qiun-data-charts type="ring" :opts="pieOpts" :chartData="pieChartData" /> -->
				</view>
			</view>
			<!-- 趋势分析 -->
			<view class="trend-container">
				<view class="trend-header">
					<view class="trend-title-wrap">
						<view class="trend-title-container passenger-flow">
							<text class="trend-title">历史客流趋势</text>
							<text
								class="trend-date-range">{{lineData.last.start_date}}-{{lineData.last.end_date}}</text>
							<view class="trend-header-right">
								<text class="trend-date-range"></text>
								<uni-button size="mini" type="default" class="last-week-btn" v-if="dateActive == 0">昨天:
									{{lineData.lineChartData.series2[1].data}}人次</uni-button>
								<uni-button size="mini" type="default" class="last-week-btn" v-if="dateActive == 1">上周:
									{{lineData.lineChartData.series2[1].data}}人次</uni-button>
								<text class="last-month-data" v-if="dateActive == 2">上月:
									{{lineData.lineChartData.series2[1].data}}人次</text>
								<!-- <text class="last-month-data" v-if="dateActive == 3">上季: {{lineData.lineChartData.series2[1].data}}人次</text> -->
								<text class="last-month-data" v-if="dateActive == 4">去年:
									{{lineData.lineChartData.series2[1].data}}人次</text>
							</view>
						</view>
						<view class="trend-header-right">
							<text
								class="trend-date-range">{{lineData.date.start_date}}-{{lineData.date.end_date}}</text>
							<uni-button size="mini" type="default" class="last-week-btn" v-if="dateActive == 0">今日:
								{{lineData.lineChartData.this_total}}人次</uni-button>
							<uni-button size="mini" type="default" class="last-week-btn" v-if="dateActive == 1">本周:
								{{lineData.lineChartData.this_total}}人次</uni-button>
							<text class="last-month-data" v-if="dateActive == 2">本月:
								{{lineData.lineChartData.this_total}}人次</text>
							<!-- <text class="last-month-data" v-if="dateActive == 3">本季: {{lineData.lineChartData.this_total}}人次</text> -->
							<text class="last-month-data" v-if="dateActive == 4">本年:
								{{lineData.lineChartData.this_total}}人次</text>
						</view>
						<view class="trend-tabs">
							<van-row class="dates text-center">
								<van-col v-for="item in dates" :key="item.value" :span="6">
									<view class="date-item" :class="{ active: dateActive === item.value }"
										@click="dataslist(item)">
										{{ item.name }}
									</view>
								</van-col>
							</van-row>
						</view>
					</view>
				</view>
				<view class="trend-chart" v-show="showlist">
					<!-- 这里使用实际的图表组件 -->
					<view class="chart-placeholder">
						<qiun-data-charts type="line" canvasId="scrolllineid"
							:opts="{enableScroll:true,xAxis:{scrollShow:true,itemCount:4,disableGrid:true}}"
							:chartData="lineChartData" :ontouch="true" :canvas2d="true" />
					</view>
				</view>
			</view>
		</view>
		<van-popup closeable :show="show" round position="bottom" get-container="body" @close="showclose"
			:z-index='9999'>
			<view class="good-box">
				<view class="title">
					切换场馆
				</view>
				<view class="good-list">
					<view class="good-item" v-for="(item,index) in venuelist" :key="index" @click="onChangelist(item)">
						<view class="flex-align">
							<van-image width="124rpx" height="124rpx" radius="10rpx" fit="cover"
								v-if="item.venue_thumb != ''" :src="item.venue_thumb" />
							<van-image v-else width="124rpx" height="124rpx" radius="10rpx" fit="cover"
								src="https://img.yzcdn.cn/vant/cat.jpeg" />

							<view class="info">
								<view class="name">{{item.venue_name}}</view>
								<view class="flex-align" v-if="item.project_list != ''">
									<view class="tag" v-if="item.project_list[0].name != ''">
										{{item.project_list[0].name}}
									</view>
									<view class="tag" v-if="item.project_list[1].name != '' && item.project_list[1]">
										{{item.project_list[1].name}}
									</view>
									<view class="tag" v-if="item.project_list[2].name != ''&& item.project_list[2]">
										{{item.project_list[2].name}}
									</view>
								</view>
								<view class="address">{{item.address}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>
<script>
	const personal = require("@/api/personal/index.js");
	export default {
		data() {
			return {
				// pieOpts: {
				// 	color: ['rgb(145,213,255)', 'rgb(255,163,158)', 'rgb(85, 255, 255)', 'rgb(90, 153, 255)',
				// 		'rgb(255, 135, 99)', 'rgb(255, 253, 175)', 'rgb(255, 197, 250)'
				// 	],
				// 	extra: {
				// 		pie: {
				// 			borderWidth: 1
				// 		}
				// 	},
				// 	legend: {
				// 		position: 'right'
				// 	},
				// 	dataLabel: false
				// },
				pieOpts: {
					"title": {
						"name": "",
						"fontSize": 12,
						"color": "#b5b5b5"
					},
					"subtitle": {
						"name": "",
						"fontSize": 12,
						"color": "#b5b5b5"
					},
					color: ['rgb(230,148,148)', 'rgb(82,222,151)', 'rgb(241,201,176)', 'rgb(81,200,194)',
						'rgb(241,237,153)', 'rgb(178,154,228)', 'rgb(245,225,153)', 'rgb(219,246,186)'
					],
					extra: {
						ring: {
							borderWidth: 1,
							ringWidth: 45,
						}
					},
					legend: {
						position: 'bottom'
					},
					// dataLabel: false
				},
				pieChartData: {},
				dates: [{
						name: '本日',
						value: '0'
					},
					{
						name: '本周',
						value: '1'
					},
					{
						name: '本月',
						value: '2'
					},
					{
						name: '本年',
						value: '4'
					},
				],
				dateActive: '0',
				lineOpts: {
					color: ['rgb(255,116,32)', 'rgb(71,199,162)'],
					legend: {
						position: 'top'
					},
					"padding": [0, 10, 0, 15],
					"xAxis": {
						axisLineColor: 'rgb(229,229,229)',
						"disableGrid": true,
						fontColor: 'rgb(153,153,153)',
					},
					"yAxis": {
						gridColor: 'rgb(229,229,229)',
						data: [{
							fontColor: 'rgb(153,153,153)',
							title: '单位(人)'
						}],
						showTitle: true
					}
				},
				lineChartData: {},
				show: false,
				venuelist: [], //场馆列表
				itemChoose: {}, // 场馆数据
				itemChooselist: {}, // 场馆数据
				showlist: true,
				week_num: '', //本周客流
				month_num: '', //本月客流
				history_num: '', //历史客流
				nac: '',
				busynessPercentage: 87,
				categoryTab: 0,
				categoryTabs: ['运动类型', '性别分布', '票卡类型', '年龄分布'],
				currentTab: 0,
				dateRangeText: '3.01-5.20',
				num: '10',
				hour_num: '30',
				percent: '',
				selectId: 0,
				project: '',
				weekList: [{
						label: "运动类型",
						value: "2"
					},
					{
						label: "票卡类型",
						value: "3"
					},
					{
						label: "性别分布",
						value: "1"
					},
					{
						label: "年龄分布",
						value: "4"
					}
				],
				sourceTab: 0,
				type: 2,
				lineData: {},
				timedata: '',
				formattedTime: ''
			}
		},
		onLoad() {
			if (uni.getStorageSync("entry_name") == '') {
				uni.showToast({
					title: '请登录！',
					icon: 'exception',
					duration: 850
				});
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/my-center/my-center'
					})
				}, 1000);
			}
			var data = uni.getStorageSync("wqzdy");
			var items = JSON.parse(data)
			this.venuelist = items
			this.itemChooselist = this.venuelist[0]
			// this.index_index()
			this.percent = this.amount((this.num / this.hour_num * 100))
			this.CustomerFlow()
		},

		methods: {
			timesSelect(item, index) {
				this.type = item.value
				this.selectId = index
				this.CustomerFlow()

			},
			// 金额计算保留两位小数
			amount(value) {
				return parseFloat(value).toFixed(2);
			},
			onCategoryFilter() {
				let that = this
				uni.showActionSheet({
					itemList: this.categoryTabs,
					success: function(res) {
						console.log(res.tapIndex, 'res')
						that.categoryTab = res.tapIndex
						console.log(that.categoryTab)
					}
				});
			},
			async index_index() {
				let params = {
					venue_id: this.itemChooselist.id,
				};
				let res = await personal.index_index(params);
				if (res.code == 1) {
					this.lineChartData = res.data.lineChartData
					this.pieChartData = res.data.pieChartData
					this.week_num = res.data.week_num //本周客流
					this.month_num = res.data.month_num //本月客流
					this.history_num = res.data.history_num //历史客流
				}
			},
			async CustomerFlow() {
				let params = {
					venue_id: this.itemChooselist.id,
					sourceTab: this.sourceTab,
					type: this.type
				};
				let res = await personal.CustomerFlow(params);
				if (res.code == 1) {
					this.pieChartData = res.data.data
					this.lineChartData = res.data.lineChartData
					this.lineData = res.data
					this.timedata = new Date()
					const year = this.timedata.getFullYear();
					const month = String(this.timedata.getMonth() + 1).padStart(2, '0');
					const day = String(this.timedata.getDate()).padStart(2, '0');
					const hour = String(this.timedata.getHours()).padStart(2, '0');
					const minute = String(this.timedata.getMinutes()).padStart(2, '0');
					this.formattedTime = `${hour}:${minute}`;
				}
			},
			onRefresh() {
				this.type = 1
				this.sourceTab = 0
				this.CustomerFlow()
			},
			dataslist(item) {
				this.dateActive = item.value
				this.sourceTab = item.value
				this.CustomerFlow()
				// this.analyse()
			},

			async analyse() {
				let params = {
					venue_id: this.itemChooselist.id,
					sourceTab: this.nac
				};
				let res = await personal.analyse(params);
				if (res.code == 1) {
					this.lineChartData = res.data.lineChartData
				}
			},
			click(item) {},
			// 选择场馆
			onChange(e) {
				let that = this
				let i = e.detail
				const item = this.venuelist[i]
				if (item) {
					this.itemChoose = item
					this.venuelist[i].checked = true
				} else {
					this.itemChoose = {}
				}
			},
			onChangelist(item) {
				this.itemChoose = item
				this.lineChartData = []
				this.itemChooselist = this.itemChoose
				this.show = false
				this.showlist = true
				this.dateActive = '1'
				this.nac = '1'
				this.sourceTab = '1'
				this.CustomerFlow()

			},
			// 确认按钮
			queren() {
				this.lineChartData = []
				this.itemChooselist = this.itemChoose
				this.show = false
				this.showlist = true
				this.dateActive = '5'
				this.nac = '5'
				this.sourceTab = '1'
				// this.index_index()
			},
			show_no() {
				this.show = true
				this.showlist = false
			},
			showclose() {
				this.show = false
				this.showlist = true
			}
		}
	}
</script>
<style lang="less" scoped>
	page {
		height: 100%;
	}

	.page-container {
		// padding: 30rpx;
		background-color: #F5F7FA;
		min-height: 100%;


		.con-1 {
			width: 100%;
			position: relative;

			/deep/ .nav-bar {
				position: fixed;
				z-index: 999;
			}

			.bg {
				width: 100%;
				height: 300rpx;
				background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/5d1ccc3b7ac6cc185130c88a8ac2e90b1eeba707.png");
				background-size: 100%;
				background-position: 50% 80%;
				position: fixed;
				z-index: 9;

				.address {
					color: #fff;
					padding-top: 190rpx;
					padding-right: 30rpx;
					padding-left: 30rpx;
					height: 150rpx;

					&-name {
						font-size: 34rpx;
						font-weight: 700;
						line-height: 34rpx;
					}

					&-desc {
						margin-top: 18rpx;
						font-size: 22rpx;
						line-height: 22rpx;
					}

					.exchange {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						background-color: rgba(0, 0, 0, 0.2);
						color: rgb(234, 248, 248);
						font-size: 24rpx;
					}
				}
			}
		}

		/deep/ .good-box {
			height: 60vh;
			padding: 0px 30rpx;
			display: flex;
			flex-direction: column;

			.title {
				color: #000;
				font-size: 30rpx;
				font-weight: 700;
				margin-top: 40rpx;
			}

			.van-radio__label {
				line-height: inherit;
			}

			.good-list {
				flex: 1;
				height: 0;
				overflow: auto;

				.good-item {
					margin-top: 30rpx;

					.info {
						margin-left: 25rpx;

						.address {
							color: #fff;
							padding-top: 20rpx;
							padding-right: 30rpx;
							height: 70rpx;

							&-name {
								font-size: 34rpx;
								font-weight: 700;
								line-height: 34rpx;
							}

							&-desc {
								margin-top: 18rpx;
								font-size: 22rpx;
								line-height: 22rpx;
							}

							.exchange {
								width: 100rpx;
								height: 100rpx;
								border-radius: 50%;
								background-color: rgba(0, 0, 0, 0.2);
								color: rgb(234, 248, 248);
								font-size: 24rpx;
							}
						}

						.name {
							color: rgb(51, 51, 51);
							font-size: 30rpx;
							font-weight: 500;
							margin-bottom: 10rpx;
						}


						.tag {
							color: rgb(4, 179, 90);
							font-size: 24rpx;
							font-weight: 500;
							padding: 0px 10rpx;
							margin-right: 20rpx;
							background-color: rgba(4, 179, 90, 0.2);
							border-radius: 4rpx;

							&:nth-of-type(2) {
								color: rgb(236, 70, 246);
								background-color: rgba(236, 70, 246, 0.2);
							}
						}

						.address {
							margin-top: 10rpx;
							color: rgb(136, 136, 136);
							font-size: 22rpx;
						}
					}

				}
			}

			.footer {
				padding: 20rpx 0;
				background-color: rgb(255, 255, 255);

				.btn {
					color: rgb(255, 255, 255);
					font-size: 30rpx;
					font-weight: 700;
					padding: 20rpx 0;
					text-align: center;
					background-image: linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%);
					border-radius: 60rpx;
				}
			}
		}
	}

	.venue-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 30rpx;
	}

	.data-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// margin-bottom: 20rpx;
	}

	.data-title {
		font-size: 16px;
		font-weight: bold;
		color: #1A1A1A;
	}

	.time-refresh {
		// display: flex;
		// align-items: center;
		// justify-content: center;
		// flex-direction: row;
	}

	.data-time {
		font-size: 14px;
		color: #666666;
		margin-right: 8rpx;
	}

	.refresh-icon {
		width: 16px;
		height: 16px;
	}

	.date-picker {
		padding-top: 10rpx;
	}

	.date-icon {
		width: 24px;
		height: 24px;
	}

	.venue-info-container {
		display: flex;
		align-items: center;
	}

	.venue-image {
		width: 160rpx;
		height: 120rpx;
		border-radius: 12rpx;
		margin-right: 20rpx;
	}

	.venue-info {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.venue-name {
		font-size: 18px;
		font-weight: bold;
		color: #1A1A1A;
		margin-bottom: 8rpx;
	}

	.venue-address {
		font-size: 14px;
		color: #666666;
	}

	.data-board {
		display: flex;
		justify-content: space-between;
		// margin-bottom: 30rpx;
	}

	.data-card {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 20rpx 10rpx 20rpx 10rpx;
		width: 210rpx;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	}

	.card-title {
		font-size: 14px;
		color: #666666;
		margin-bottom: 16rpx;
		display: block;
		text-align: center;
	}

	.card-value {
		font-size: 20px;
		color: #1A1A1A;
		font-weight: bold;
		display: block;
		margin-bottom: 8rpx;
		text-align: center;
	}

	.card-unit {
		font-size: 12px;
		color: #999999;
	}

	.card-desc {
		font-size: 12px;
		color: #999999;
		display: block;
	}

	.chart-container {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;

		.source-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			// margin-bottom: 30rpx;
		}

		.source-select {
			display: flex;
			align-items: center;
			gap: 10rpx;
			padding: 12rpx 24rpx;
			background-color: #f5f6f7;
			border-radius: 8px;
			cursor: pointer;
		}

		.selected-source {
			font-size: 14px;
			color: #333333;
		}

		.week-item {
			background-color: rgb(243, 243, 243);
			border-radius: 5rpx;
			text-align: center;
			color: rgb(51, 51, 51);
			font-size: 24rpx;
			font-weight: 500;
			border: solid 2rpx transparent;
			box-sizing: border-box;
			padding: 6rpx 15rpx;
			margin-top: 20rpx;
			margin-right: 20rpx;
		}

		.active {
			color: rgba(255, 255, 255, 1.0);
			background-color: rgba(0, 0, 255, 1);
			position: relative;
		}
	}

	.chart-header {
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.chart-header1 {
		margin-bottom: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.chart-title {
		font-size: 16px;
		font-weight: bold;
		color: #1A1A1A;
	}

	.chart-content {
		display: flex;
		justify-content: space-between;
		// height: 200rpx;
	}

	.pie-chart {
		flex: 1;
	}

	.chart-legend {
		width: 200rpx;
		padding-left: 30rpx;
	}

	.legend-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.legend-color {
		width: 24rpx;
		height: 24rpx;
		border-radius: 6rpx;
		margin-right: 16rpx;
	}

	.legend-text {
		font-size: 14px;
		color: #666666;
	}

	/* 新增背景环样式 */
	.background-ring {
		width: 100%;
		height: 100%;
		position: absolute;
		border-image: linear-gradient(to right, #F0F0F0, #E0E0E0);
		border-radius: 50%;
		box-sizing: border-box;
		z-index: 0;
		/* 置于底层 */
	}

	/* 调整原有元素的层级 */
	.half-circle {
		z-index: 1;
		/* 进度层在背景上方 */
	}

	.content {
		z-index: 2;
		/* 文字置于最顶层 */
	}

	/* 样式部分 */
	.progress-container {
		width: 220rpx;
		height: 220rpx;
		position: relative;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 半圆基础样式 */
	.half-circle {
		width: 100%;
		height: 100%;
		position: absolute;
		border-radius: 50%;
		overflow: hidden;
	}

	/* 左侧容器控制 */
	.left-wrapper {
		clip: rect(0, 100rpx, 200rpx, 0);
		/* 仅显示左半边 */
	}

	/* 右侧容器控制 */
	.right-wrapper {
		clip: rect(0, 200rpx, 200rpx, 100rpx);
		/* 仅显示右半边 */
	}

	/* 遮罩层公共样式 */
	.left-mask,
	.right-mask {
		width: 100%;
		height: 100%;
		border: 16rpx solid #4080FF;
		border-radius: 50%;
		position: absolute;
		transition: transform 0.5s ease;
	}

	/* 左侧遮罩特殊定位 */
	.left-mask {
		left: 0;
		clip: rect(0, 100rpx, 200rpx, 0);
	}

	/* 右侧遮罩特殊定位 */
	.right-mask {
		right: 0;
		clip: rect(0, 200rpx, 200rpx, 100rpx);
	}

	/* 中心文字 */
	.content {
		position: absolute;
		width: 150rpx;
		height: 150rpx;
		background: white;
		border-radius: 50%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	// .circle-content {
	// 	text-align: center;
	// }

	.circle-value {
		font-size: 32px;
		color: #ffffff;
		font-weight: bold;
		display: block;
	}

	.circle-label {
		font-size: 14px;
		color: #ffffff;
		display: block;
		margin-top: 8rpx;
	}

	.flow-status {
		// flex: 1;
		padding: 15rpx 20rpx;
	}

	.status-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 5rpx;
	}

	.status-item:last-child {
		margin-bottom: 0;
	}

	.status-label {
		font-size: 26rpx;
		color: #666666;
	}

	.status-value {
		font-size: 30rpx;
		font-weight: bold;
	}

	.status-inside {
		color: #4080FF;
	}

	.status-left {
		color: #36CFC9;
	}

	.status-waiting {
		color: #FFA940;
	}

	.trend-container {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx;
	}

	.trend-header {
		margin-bottom: 30rpx;
	}

	.trend-title-wrap {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.trend-header-right {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex: 1;
		// margin-top: 16rpx;
	}

	.last-week-btn {
		font-size: 10px;
		padding: 0 20rpx;
		height: 48rpx;
		line-height: 48rpx;
		background: #F5F7FA;
		color: #666666;
		border: none;
	}

	.last-month-data {
		font-size: 10px;
		color: #666666;
		background: #F5F7FA;
		padding: 8rpx 20rpx;
		border-radius: 24rpx;
	}

	.trend-title-container {
		display: flex;
		align-items: center;
	}

	.trend-title {
		font-size: 16px;
		font-weight: bold;
		color: #1A1A1A;
		margin-right: 16rpx;
	}

	.trend-date-range {
		font-size: 20rpx;
		color: #666666;
	}

	.filter-icon {
		padding: 10rpx;
	}

	.trend-tabs {
		width: 100%;
		padding: 20rpx 40rpx;

		.dates {
			color: rgb(136, 136, 136);
			font-size: 28rpx;
			font-weight: 700;

			.date-item {
				padding: 20rpx 0;
			}

			.active {
				color: rgb(51, 51, 51);
			}
		}
	}

	.chart-placeholder {
		height: 400rpx;
		background-color: #F5F7FA;
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999999;
		font-size: 14px;
	}
</style>